<template>
  <div class="singer-container">
    <div class="singer-content">
      <div class="singer-left">
        <ul>
          <h2>推荐</h2>
          <li>推荐歌手</li>
          <li>入驻歌手</li>
        </ul>
        <ul>
          <h2>华语</h2>
          <li>华语男歌手</li>
          <li>华语女歌手</li>
          <li>华语组合/乐队</li>
        </ul>
        <ul>
          <h2>欧美</h2>
          <li>欧美男歌手</li>
          <li>欧美女歌手</li>
          <li>欧美组合/乐队</li>
        </ul>
        <ul>
          <h2>日本</h2>
          <li>日本男歌手</li>
          <li>日本女歌手</li>
          <li>日本组合/乐队</li>
        </ul>
        <ul>
          <h2>韩国</h2>
          <li>韩国男歌手</li>
          <li>韩国女歌手</li>
          <li>韩国组合/乐队</li>
        </ul>
        <ul>
          <h2>其他</h2>
          <li>其他男歌手</li>
          <li>其他女歌手</li>
          <li>其他组合/乐队</li>
        </ul>
      </div>
      <div class="singer-right">
        <SingerList title="入驻歌手" :singerList="residentSingerList"></SingerList>
        <SingerList title="热门歌手" :singerList="popularSingerList"></SingerList>
        <SingerNameList :singerName="singerName"></SingerNameList>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SingerList'
}
</script>

<script setup>
import { onMounted, ref } from 'vue'
import SingerList from './SingerList'
import SingerNameList from './SingerNameList'
// 引入request工具函数
import request from '../../../utils/request'

let residentSingerList = ref([])
let popularSingerList = ref([])
let singerName = ref([])
onMounted( async() => {
  // 发送入驻歌手的请求
  getSingerList(5001,residentSingerList,9)
  // 发送热门歌手的请求
  getSingerList(1001,popularSingerList,9)
  getSingerList(1002,singerName,29)
  getSingerList(1003,singerName,29)
  getSingerList(2001,singerName,29)
})

const getSingerList = async(cat,dataName,num) => {
  const result = await request(`artist/list?cat=${cat}`)
  dataName.value.push()
  for(let i = 0; i <= num; i++){
    dataName.value.push(result.artists[i])
  }
}

</script>

<style scoped>
.singer-container{
  width: 100%;
  background-color: #f5f5f5;
}
.singer-content{
  display: flex;
  width: 980px;
  margin: 0 auto;
  border-left: 1px solid #d3d3d3;
  border-right: 1px solid #d3d3d3;
}
.singer-left{
  width: 180px;
  border-right: 1px solid #d3d3d3;
}
.singer-left>ul{
  /* margin-top: 40px; */
  padding-top: 15px;
  margin: 5px 10px 0 10px;
  border-top: 1px solid #d3d3d3;
}
.singer-left>ul:first-of-type{
  padding-top: 15px;
  margin: 40px 10px 0 10px;
  border: none;
}
.singer-left>ul>li{
  height: 29px;
  line-height: 29px;
  background: url(https://s2.music.126.net/style/web2/img/singer.png?da508008907470f08e5596332285f52d) no-repeat 0 9999px ;
  padding-left: 30px;
  background-position: 0 -30px;
}
.singer-left>ul>li:hover{
  text-decoration: underline;
  cursor: pointer;
}
.singer-left>ul>h2{
  padding-left: 20px;
}
.singer-right{
  width: 800px;
  padding: 40px;
  background-color: white;
}
</style>>